import React from 'react';
import { Menu } from 'antd';
import {
  UserOutlined,
  SettingFilled,
  DatabaseOutlined,
  DashboardOutlined
} from '@ant-design/icons';

function Sidebar({ onMenuClick, collapsed }) {
  const handleMenuClick = ({ key }) => {
    if (onMenuClick) {
      onMenuClick(key);
    }
  };

  return (
    <Menu
      mode="inline"
      defaultSelectedKeys={['dashboard']}
      defaultOpenKeys={collapsed ? [] : ['userManagement', 'systemManagement']}
      style={{ height: '100%', borderRight: 0 }}
      onClick={handleMenuClick}
      theme="light"
      inlineCollapsed={collapsed}
    >
      {/* 仪表盘 */}
      <Menu.Item key="dashboard" icon={<DashboardOutlined />}>
        仪表盘
      </Menu.Item>

      {/* 用户管理模块 */}
      <Menu.SubMenu key="userManagement" icon={<UserOutlined />} title="用户管理">
        <Menu.Item key="users">用户管理</Menu.Item>
        <Menu.Item key="admins">管理员管理</Menu.Item>
        <Menu.Item key="roles">角色管理</Menu.Item>
        <Menu.Item key="permissions">权限管理</Menu.Item>
      </Menu.SubMenu>

      {/* 内容管理模块 */}
      <Menu.SubMenu key="contentManagement" icon={<DatabaseOutlined />} title="内容管理">
        <Menu.Item key="articles">文章管理</Menu.Item>
        <Menu.Item key="articlecategory">文章分类</Menu.Item>
        <Menu.Item key="friendlinks">友情链接</Menu.Item>
      </Menu.SubMenu>

      {/* 系统管理与设置模块 */}
      <Menu.SubMenu key="systemManagement" icon={<SettingFilled />} title="系统管理">
        <Menu.Item key="logs">操作日志</Menu.Item>
        <Menu.Item key="menus">菜单管理</Menu.Item>
        <Menu.Item key="urlsettings">网址设置</Menu.Item>
        <Menu.Item key="emailsettings">Email设置</Menu.Item>
      </Menu.SubMenu>
    </Menu>
  );
}

export default Sidebar;